<script lang="ts" setup>
import { ref } from 'vue'
// import { useRouter } from 'vue-router'
import { onClickOutside } from '@vueuse/core'
import {
  ComponentControl,
  EditControl,
  LayerControl,
  SideSettingControl,
} from './components'
import { setItem } from '@/utils'
import { useDesignStore } from '@/store/design'
import { SvgIcon, svgIconfy } from '@/components'

// const router = useRouter()
const store = useDesignStore()

const ifShowEditInput = ref(false)
const webName = ref('未命名项目')
const webNameRef = ref(null)
function editName(e: any) {
  if (
    ifShowEditInput.value
    && e.target.dataset.type
    && e.target.dataset.type === 'input'
  ) {
    return
  }
  ifShowEditInput.value = !ifShowEditInput.value;
  (webNameRef.value as any).focus()
}

const showChart = ref(false)
const showLayer = ref(false)
const showSide = ref(true)
function layerShrink() {
  showLayer.value = false
}

const centerTitleRef = ref<HTMLElement>()
onClickOutside(centerTitleRef, () => {
  ifShowEditInput.value = false
})

function showConfig(show: string, event: any) {
  switch (show) {
    case 'chart':
      showChart.value = !showChart.value
      break
    case 'layer':
      showLayer.value = !showLayer.value
      break
    case 'side':
      showSide.value = !showSide.value
      break
  }
  let target = event.target
  while (target.nodeName !== 'BUTTON') {
    target = target.parentNode
  }
  target.blur()
}

// 预览
function goPreview() {
  setItem('componentsInCanvas', store.$state.componentsInCanvas)
  setItem('pageConfig', store.$state.pageConfig)
  window.open('http://localhost:8999/#/preview', '_blank')
}
</script>

<template>
  <div class="designSpace-container">
    <!-- 头部控制 -->
    <div class="header">
      <div class="left-box">
        <span class="logo-box">
          <SvgIcon
            class="logo"
            name="i-ic:baseline-design-services"
            width="30px"
            height="30px"
            color="#0ca296"
          />
        </span>
        <div class="btn-box">
          <el-tooltip effect="dark" content="图表组件" placement="bottom">
            <el-button
              :plain="!showChart"
              type="primary"
              @click="showConfig('chart', $event)"
            >
              <template #icon>
                <SvgIcon
                  name="i-lets-icons:chart-fill"
                  size="1.5em"
                  color=""
                />
              </template>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="图层控制" placement="bottom">
            <el-button
              :plain="!showLayer"
              type="primary"
              @click="showConfig('layer', $event)"
            >
              <template #icon>
                <SvgIcon name="i-bxs:layer" size="1.5em" color="" />
              </template>
            </el-button>
          </el-tooltip>

          <el-tooltip effect="dark" content="详情设置" placement="bottom">
            <el-button
              :plain="!showSide"
              type="primary"
              @click="showConfig('side', $event)"
            >
              <template #icon>
                <SvgIcon name="i-solar:siderbar-bold" size="1.5em" color="" />
              </template>
            </el-button>
          </el-tooltip>

          <div class="line" />
          <el-button plain disabled type="">
            <template #icon>
              <SvgIcon name="i-mage:caret-left-fill" size="1.5em" color="" />
            </template>
          </el-button>
          <el-button plain disabled type="">
            <template #icon>
              <SvgIcon name="i-mage:caret-right-fill" size="1.5em" color="" />
            </template>
          </el-button>
        </div>
      </div>
      <div class="center-box">
        <div ref="centerTitleRef" style="display: flex; align-items: center" @click="editName">
          <SvgIcon name="i-icon-park-solid:workbench" color="#9f9f9f" size="1.25em" />
          <span style="font-weight: bold; margin: 0 5px">工作空间 — </span>
          <el-button v-show="!ifShowEditInput" class="name-edit font-700" link type="primary">
            {{ webName }}
          </el-button>
          <el-input
            v-show="ifShowEditInput"
            ref="webNameRef"
            v-model="webName"
            maxlength="20"
            show-word-limit
            data-type="input"
            type="text"
          />
        </div>
      </div>
      <div class="right-box">
        <el-button type="primary" plain :icon="svgIconfy('i-mage:preview-circle-fill')" @click="goPreview">
          预览
        </el-button>
        <el-button type="primary" plain :icon="svgIconfy('i-ic:round-publish')">
          发布
        </el-button>
      </div>
    </div>
    <!-- 内容显示 -->
    <div class="content">
      <!-- 组件图层展示区域 -->
      <div class="component-control" :class="showChart ? '' : 'shrink'">
        <ComponentControl :shrink-component="showChart" />
      </div>
      <div class="layer-control" :class="!showLayer ? 'hideLayer' : ''">
        <LayerControl @shrink="layerShrink" />
      </div>
      <div class="edit-control">
        <EditControl />
      </div>
      <div
        class="side-setting-control"
        :class="!showSide ? 'hideSideSetting' : ''"
      >
        <SideSettingControl />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.designSpace-container {
  height: 100%;
  width: 100%;

  .header {
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid #efeff5;

    & > div {
      width: calc(100% / 3);
    }

    .left-box {
      display: flex;
      align-items: center;
      height: 100%;

      .logo-box {
        width: 40px;
        height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        background-color: #fff;
        transition: background-color 1s;
        cursor: pointer;
        margin-right: 20px;

        &:hover {
          background-color: #eceded;
          border-radius: 5px;
        }
      }

      .btn-box {
        display: inline-flex;
        align-items: center;
        height: 100%;

        .line {
          width: 2px;
          height: 2em;
          background-color: #eceded;
          margin: 0 20px;
        }
      }
    }

    .center-box {
      display: flex;
      justify-content: center;
      white-space: nowrap;

      .el-input {
        height: 30px;
        width: 200px;
      }

      .name-edit {
        height: 30px;
        // border-radius: 15px;
      }
    }

    .right-box {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;

      .el-button {
        margin: 0 10px;

        .svg-icon {
          margin-right: 5px;
        }
      }
    }
  }

  .content {
    height: calc(100% - 60px);
    width: 100%;
    overflow: hidden;
    display: flex;

    & > div {
      display: inline-block;
      overflow: hidden;
      position: relative;
    }

    .component-control {
      width: 330px;
      overflow: hidden;
      z-index: 1;
      transition: all 0.4s;

      &.shrink {
        width: 75px;
      }
    }

    .layer-control {
      width: 200px;
      transition: width 0.4s;

      &.hideLayer {
        width: 0;
      }
    }

    .edit-control {
      flex: 1;
    }

    .side-setting-control {
      width: 350px;
      transition: width 0.4s;

      &.hideSideSetting {
        width: 0;
      }
    }
  }
}
</style>
